<template>
  <div class="nav-logo">
    <div class="content">
      <img src="" alt="" />
      <div>
        <ul>
          <li v-for="(item, index) in navList" :key="item.id" @click="jumpTo(index)" :class="currentIndex === index ? 'active' : ''">
            <router-link :to="{ name: item.name }">
              {{ item.label }}
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      navList: [
        {
          id: "1",
          name: "Home",
          label: "首页",
        },
        {
          id: "2",
          name: "Host",
          label: "主持人",
        },
        {
          id: "3",
          name: "Join",
          label: "加入我们",
        },
        {
          id: "4",
          name: "About",
          label: "关于我们",
        },
      ],
    };
  },
  methods: {
    jumpTo(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped lang="less">
.nav-logo {
  width: 100%;
  height: 80px;
  background: #c4b4a8;
  div {
    width: 1000px;
    margin: 0 auto;
    ul {
      display: flex;
      margin-left: 245px;
      li {
        width: 120px;
        border-radius: 10px;
        border: 2px solid transparent;
        margin-left: 20px;
        line-height: 31px;
        &:hover {
          border-radius: 10px;
          border: 2px solid #fff;
        }
        a {
          color: #fff;
          font-size: 20px;
        }
      }
      .active {
        border-radius: 10px;
        border: 2px solid #fff;
      }
    }
  }
}
</style>